<template>
  <el-container class="layout-container">
    <el-aside width="212px">
      <el-menu
        :default-active="currentRoute"
        router
        background-color="#ffffff"
        text-color="#333333"
        active-text-color="#409eff"
      >
        <!-- 一级：首页概览 -->
        <el-menu-item index="/home">
          <span>首页概览</span>
        </el-menu-item>

        <!-- 一级：工作协同 -->
        <el-sub-menu index="work">
          <template #title><span>工作协同</span></template>
          <el-menu-item index="/collab/creative">创意列表</el-menu-item>
          <el-menu-item index="/collab/projects">项目管理</el-menu-item>
          <el-menu-item index="/collab/software">软件列表</el-menu-item>
        </el-sub-menu>

        <!-- 一级：文件传输 -->
        <el-sub-menu index="transfer">
          <template #title><span>文件传输</span></template>
          <el-menu-item index="/dashboard">数据大屏</el-menu-item>
          <el-menu-item index="/remote-transfer">远程传输</el-menu-item>
          <el-menu-item index="/files">文件目录</el-menu-item>
          <el-menu-item index="/transfer">传输队列</el-menu-item>
        </el-sub-menu>

        <!-- 一级：通知管理 -->
        <el-menu-item index="/notifications">
          <span>通知管理</span>
        </el-menu-item>

        <!-- 一级：账户列表 -->
        <el-sub-menu index="accounts">
          <template #title><span>账户列表</span></template>
          <el-menu-item index="/users">用户列表</el-menu-item>
          <el-menu-item index="/clients">客户端管理</el-menu-item>
        </el-sub-menu>

        <!-- 一级：系统设置 -->
        <el-sub-menu index="settings">
          <template #title><span>系统设置</span></template>
          <el-menu-item index="/settings/params">参数调整</el-menu-item>
          <el-menu-item index="/logs">日志查看</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <div class="header-content">
          <div class="header-left">
            <img class="logo-img" :src="logoUrl" alt="风行TV" />
          </div>
          <div class="user-info">
            <el-dropdown @command="handleCommand">
              <div class="header-right">
                <el-icon class="bell"><Bell /></el-icon>
                <div class="avatar">
                  <span class="avatar-icon">👤</span>
                </div>
                <div class="user-meta">
                  <div class="name">{{ authStore.user?.username || '张运营' }}</div>
                  <div class="role">管理员</div>
                </div>
                <el-icon class="caret"><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/store/auth'
import { ElMessageBox } from 'element-plus'
import { Bell, ArrowDown } from '@element-plus/icons-vue'
import logoImg from '../assets/logo.png'
const logoUrl = logoImg

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

const currentRoute = computed(() => route.path)
const pageTitle = computed(() => route.meta.title || '')

const handleCommand = async (command) => {
  if (command === 'logout') {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      type: 'warning'
    })
    await authStore.logout()
    router.push('/login')
  }
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.el-aside {
  background-color: #ffffff;
  margin-top: 62px;
}

.header-left{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo-img{
  width:170px;
  height:56px;
  object-fit:contain;
  margin-left:10px;
}

.el-header {
  background-color: white;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 62px;
  z-index: 1000;
}

.header-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title { display: none; }

.user-name {
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* 右侧用户区样式 */
.header-right{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
}
.header-right .bell{
  color:#9aa0a6;
  font-size:18px;
}
.avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#3A78FF;
  display:flex;
  align-items:center;
  justify-content:center;
}
.avatar .avatar-icon{
  color:#fff;
  font-size:16px;
  line-height:1;
}
.user-meta{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.user-meta .name{
  font-size:14px;
  color:#333;
}
.user-meta .role{
  font-size:12px;
  color:#9aa0a6;
  margin-top:2px;
}
.header-right .caret{
  color:#333;
  font-size:14px;
}

.el-main {
  background-color: #f0f2f5;
  padding: 20px;
  margin-top: 62px;
}
</style>
